<template>
  <div class="basetable" element-loading-text="拼命加载中">
    <!-- v-loading 设置加载 -->
    <div class="selectMenu">
      <!-- 点击触发add方法 -->
      <el-button size="small" type="primary" @click="add">数据库备份</el-button>
      <span class="spansearch">数据库名称</span>
      <el-input size="small" placeholder="输入数据库名称" style="width:200px;margin-left: 16px;" @input="searchClick"
        clearable
        v-model="input1">
      </el-input>

      <span class="spansearch">备份日期</span>
      <el-input size="small" placeholder="输入备份日期" style="width:250px;margin-left: 16px;" @input="searchClickcreate_time"
        clearable
        v-model="inputcreate_time">
      </el-input>
    </div>
    <div class="tableMain">
      <el-table :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
      style="width: 100%">
      <el-table-column type="index" width="100" label="序号" ></el-table-column>
        <el-table-column prop="create_time" label="日期"></el-table-column>
        <el-table-column prop="name" label="数据库名称"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <!-- 点击编辑进入编辑页面进行编辑表格数据 -->
            <a class="download" :href="scope.row.down_file" download>下载</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 下面这个用来设置点击添加按钮的弹出框，里面可以进行嵌套表格来展示弹出的表格信息,使用下面的:visible.sync来控制显示与否 -->
    <!-- 里面绑定的是我们新设置的值，填写完成后，将我们这个新值塞到页面中所有的数据当中去 -->
    <el-dialog title="是否进行数据库备份" :visible.sync="dialogFormVisible" width="350px">
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50,100]" 
      :page-size="pagesize"         
      layout="total, sizes, prev, pager, next, jumper"
      :total="userList.length">    
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
      userList: [],
      dialogFormVisible: false,
      formLabelWidth: "80px",
      // 设置form用于进行添加的时候绑定值
      form: {},
      value6: "",
      currentPage3: 1,
      currentIndex: "",
      pathid:"",
      datapath:"",
      pathdata:"",
      response:"",
      input1: "", //搜索
      inputcreate_time: "", //搜索
    };
  },
  created() {
    this.dataLists();
  },
  methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
        },
    
    //数据库列表
    async dataLists(){
      let lists = (await this.$api.home.dataLists()).data.data
      this.userList = lists
    },
    handleDelete(index,row){
      let url =row.down_file//下载地址
      let fileName = row.name;//文件名
      let xhr = new XMLHttpRequest();
      console.log("xhr",xhr);
      xhr.open('GET', url, true);
      xhr.responseType = 'blob'
      xhr.withCredentials  = true
      xhr.onload = (e) => {
        var res = e.target.response;
        this.saveAs(res, fileName);
      };
      xhr.send();
    },
    // 导出文件函数
    saveAs (obj, fileName) {
      let ele = document.createElement('a');
      ele.download = fileName || '下载';
      ele.href = URL.createObjectURL(obj); // 绑定a标签
      ele.style.display = 'none';
      document.body.appendChild(ele); // 兼容火狐浏览器
      ele.click();
      setTimeout(function () { // 延时释放
          URL.revokeObjectURL(obj); // 用URL.revokeObjectURL()来释放这个object URL
          document.body.removeChild(ele);// 兼容火狐浏览器
      }, 100);
    },

    // 增加数据的方式，单独的设置一些值，用于增加功能，这些值放在对象里面进行设置，然后将这个新增的对象塞到总数据里面
    add() {
      this.form = {
        date: "",
        name: "",
        region: "",
        address: ""
      };
      //   设置点击按钮之后进行显示对话框
      this.dialogFormVisible = true;
    },
    update() {
      this.$api.home.dataBase().then(res=>{
          if(res.data.code == 200){
            this.$message({
            message: res.data.msg,
            type: 'success'
          });
          this.dataLists()
          this.dialogFormVisible = false;
        }else{
           this.$message.error(res.data.msg)
        }
      })
      
    },
    handleEdit(index, row) {
      // 将数据的index传递过来用于实现数据的回显
      this.form = this.userList[index];
      this.currentIndex = index;
      // 设置对话框的可见
      this.dialogFormVisible = true;
    },
    cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    },
    //搜索
    searchClick() {
      let searchText = this.input1;
      let list = [];
      if (searchText) {
        list = this.userList.filter(e => {
          return e.name.match(searchText);
        });
        this.userList = list;
      } else {
        this.dataLists();
      }
    },
    searchClickcreate_time(){
      let searchText = this.inputcreate_time;
      let list = [];
      if (searchText) {
        list = this.userList.filter(e => {
          return e.create_time.match(searchText);
        });
        this.userList = list;
      } else {
        this.dataLists();
      }
    },
  },
  
};
</script>
<style lang="less" scope>
.tableMain {
    margin-top: 10px;
  }
//搜索框文字
 .spansearch{
   color: #409EFF;
   font-size: 15px;
   margin-left: 20px;
 }
.page {
    float: left;
   margin-top: 10px;
  }
  .bta{
    text-align: center;
    margin-left:20px;
    width: 56px;
    height: 32px;
  }

  .download{
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid #ccc;
    color: #363636;
    border-radius: 5px;
  }
  .download:hover{
    color:#1890ff;
  }
</style>